<template>
  <div>
    <div id="line"></div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
var Highcharts = require("highcharts");
require("highcharts/modules/exporting")(Highcharts);
export default {
  computed: {
    ...mapGetters({
      list: "cate/list",
    }),
  },
  mounted() {
    this.reqList();
  },
  watch: {
    list: {
      handler() {
        //折线图
        this.doLine();
      },
      deep:true,
    },
  },
   methods: {
    ...mapActions({
      reqList: "cate/reqList",
    }),
    // 折线图绘制
    doLine() {
      let lineOptions = {
        title: {
          text: "分类-子类数量",
        },

        yAxis: {
          title: {
            text: "子类数量",
          },
        },
        legend: {
          layout: "vertical",
          align: "right",
          verticalAlign: "middle",
        },
        xAxis: {
          categories: this.list.map((item) => item.catename),
        },
        series: [
          {
            name: "子类数量",
            data: this.list.map((item) =>
              item.children ? item.children.length : 0
            ), //[3,5,1,..,0]
          },
        ],
        responsive: {
          rules: [
            {
              condition: {
                maxWidth: 500,
              },
              chartOptions: {
                legend: {
                  layout: "horizontal",
                  align: "center",
                  verticalAlign: "bottom",
                },
              },
            },
          ],
        },
      };
      // 创建图表
      Highcharts.chart("line", lineOptions);
    },
    //绘制柱形图
    doBar() {
      let barOptions = {
        chart: {
          type: "column",
        },
        title: {
          text: "子类数量",
        },

        xAxis: {
          categories: this.list.map((item) => item.catename),
          crosshair: true,
        },
        yAxis: {
          min: 0,
          title: {
            text: "子类数量",
          },
        },
        tooltip: {
          // head + 每个 point + footer 拼接成完整的 table
          headerFormat:
            '<span style="font-size:10px">{point.key}</span><table>',
          pointFormat:
            '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} 个</b></td></tr>',
          footerFormat: "</table>",
          shared: true,
          useHTML: true,
        },
        plotOptions: {
          column: {
            borderWidth: 0,
          },
        },
        series: [
          {
            name: "子类数量",
            data: this.list.map((item) =>
              item.children ? item.children.length : 0
            ),
          },
        ],
      };
      // 创建图表
      Highcharts.chart("bar", barOptions);
    },
   }
}

</script>
<style scoped lang="less">
@import "../../less/index.less";
#id{
  width: 100vw;
  height: 100vh;
  margin: 20px;
}
</style>